<template>
  <div class="content-box">
    <div class="content">
      <div class="title">
        <span>最新设计</span>
        <i class="iconfont icon-zuixinnew3"></i>
      </div>
      <div class="content-wrapper">
        <router-link
          tag="div"
          to="/detail"
          class="content-item"
          v-for="item of contentList"
          :key="item.id"
        >
          <img :src="item.imgURL" alt="">
          <p class="content-item-title">{{item.title}}</p>
          <p class="content-item-label">{{item.label}}</p>
        </router-link>
      </div>
      <div class="content-more">更多设计<i class="iconfont icon-gengduo" style="position: relative; top: 0.02rem; left: 0.06rem;"></i></div>
    </div>

    <div class="content">
      <div class="title">
        <span>大咖作品</span>
        <i class="iconfont icon-zuirehotxiankuang"></i>
      </div>
      <div class="content-wrapper">
        <div class="content-item2" v-for="item of contentList" :key="item.id">
          <div class="content-img-box">
            <img :src="item.imgURL" alt="">
          </div>
          <div class="content-desc-box">
            <p class="content-item-title2">{{item.title}}</p>
            <p class="content-item-label2">{{item.label}}</p>
            <p class="content-item-authour-label">xiaohao</p>
          </div>
        </div>
      </div>
      <div class="content-more">更多作品<i class="iconfont icon-gengduo" style="position: relative; top: 0.02rem; left: 0.06rem;"></i></div>
    </div>

    <div class="content">
      <div class="title">
        <span>最新赛事</span>
        <i class="iconfont icon-zuixinnew3"></i>
      </div>
      <div class="content-wrapper">
        <div class="content-item" v-for="item of contentList" :key="item.id">
          <img :src="item.imgURL" alt="">
          <p class="content-item-title">{{item.title}}</p>
          <p class="content-item-label">{{item.label}}</p>
        </div>
      </div>
      <div class="content-more">更多赛事<i class="iconfont icon-gengduo" style="position: relative; top: 0.02rem; left: 0.06rem;"></i></div>
    </div>

    <div class="content">
      <div class="title">
        <span>科技快讯</span>
        <i class="iconfont icon-huo"></i>
      </div>
      <div class="content-wrapper">
        <div class="content-item2" v-for="item of contentList" :key="item.id">
          <div class="content-img-box">
            <img :src="item.imgURL" alt="">
          </div>
          <div class="content-desc-box">
            <p class="content-item-title2">{{item.title}}</p>
            <p class="content-item-label2">{{item.label}}</p>
            <p class="content-item-authour-label">xiaohao</p>
          </div>
        </div>
      </div>
      <div class="content-more">更多快讯<i class="iconfont icon-gengduo" style="position: relative; top: 0.02rem; left: 0.06rem;"></i></div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'HomeContent',
  data () {
    return {
      contentList: [{
        id: '0001', imgURL: '//edu-image.nosdn.127.net/b8cbbde8bc98409aad5227fde070df7d.png?imageView&quality=100', title: '职场通用技能', label: '跟小耗老师学编程'
      }, {
        id: '0002', imgURL: '//edu-image.nosdn.127.net/9c3adc02cea44377a91c6716201bbe4c.png?imageView&quality=100', title: '编程与开发', label: '小丽老师教你ps'
      }, {
        id: '0003', imgURL: '//edu-image.nosdn.127.net/7594f6916fc94a16af474856d1de8786.png?imageView&quality=100', title: 'AI与数据科学AI与数据科学AI与数据科学', label: '小萌老师教你卖萌小萌老师教你卖萌'
      }, {
        id: '0004', imgURL: '//edu-image.nosdn.127.net/29696616fe6e495a9b191244f2bd0bea.png?imageView&quality=100', title: '产品与运营', label: '小智老师教你解题三步式'
      }]
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/stylus/mixin.styl'
.content-box
  .content
    margin-top .28rem
    padding 0 .2rem
    .title
      width 2.2rem
      line-height .4rem
      padding-bottom .05rem
      text-align center
      box-sizing border-box
      font-size .35rem
      font-weight 550
      &>span
        border-bottom .04rem solid #7dbfff
      &>i
        position relative
        top -.06rem
    .content-wrapper
      width 100%
      display inline-block
      .content-item
        padding .2rem 0.1rem 0.15rem
        margin 0 auto 0
        display inline-block
        width 49%
        height 3.1rem
        box-sizing border-box
        overflow hidden
        box-shadow: 4px 6px 10px 0 rgba(95, 101, 105, 0.15)
        border-radius .2rem
        &:nth-child(1), &:nth-child(3)
          margin-right 2%
        &>img
          width 100%
          height 2rem
          border-radius 0.2rem
        .content-item-title
          padding .05rem .1rem 0.05rem
          line-height .4rem
          font-size .3rem
          font-weight bold
          ellipsis()
        .content-item-label
          padding 0 0.1rem .1rem 0.1rem
          line-height .35rem
          font-size .25rem
          color #9199A1
          ellipsis()
      .content-item2
        width 97%
        height 1.5rem
        padding 0.15rem 0.1rem 0.1rem
        font-size 0
        box-shadow: 4px 6px 10px 0 rgba(95, 101, 105, 0.15)
        margin-bottom .1rem
        margin-right 3%
        border-radius .15rem
        .content-img-box
          display inline-block
          vertical-align: top;
          width 40%
          height 100%
          &>img
            width 100%
            height 100%
            border-radius .1rem
        .content-desc-box
          display inline-block
          vertical-align: top;
          width 60%
          height 100%
          box-sizing border-box
          font-size .3rem
          padding-top .15rem
          position relative
          .content-item-title2
            padding .05rem .1rem 0.05rem 0.2rem
            line-height .4rem
            font-size .30rem
            font-weight bold
            ellipsis()
          .content-item-label2
            padding 0 0.1rem .1rem 0.2rem
            line-height .35rem
            font-size .25rem
            color #9199A1
            ellipsis()
          .content-item-authour-label
            position absolute
            right 0.2rem
            top 0.92rem
            color #9199A1
    .content-more
      background-color #f5f7fa
      line-height .5rem
      text-align center
      color #222
      border-radius .1rem
      margin-top .1rem
</style>
